<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.jkd')">
          <el-input v-model="filters.name" :placeholder="$t('message.qsr') + $t('message.jkd')" clearable />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clearList">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane
        v-for="(tab, i) in tabList"
        :key="tab.id"
        :label="tab.manufacturer"
        :name="i.toString()"
      >
        <div class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" @click="showZhpzBtn">{{ $t('message.tjsb') }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail">
            <i class="el-icon-warning-outline" /> {{ $t('message.cssm') }}
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="rowCanSelect"
          />
          <el-table-column
            align="center"
            :label="$t('message.mc')"
            prop="name"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sblx2')"
            prop="type"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.type == '0'
                  ? $t('message.jksxt')
                  : scope.row.type == '1'
                    ? $t('message.qymdsxt')
                    : scope.row.type == '2'
                      ? $t('message.rlzpsxt')
                      : ''
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.txxy')"
            prop="httpPort"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.httpPort == '1' ? 'https' : 'http' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('message.txdz')"
            prop="ipAddre"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.dkh')"
            prop="portCode"
            min-width="100"
          />
          <el-table-column
            align="center"
            :label="$t('message.tondao')"
            prop="aisle"
            min-width="100"
          />
          <el-table-column
            align="center"
            :label="$t('message.jwd')"
            prop="location"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.sbbm2')"
            prop="macId"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            :label="$t('message.spldz')"
            prop="realTimeVideoAddress"
            show-overflow-tooltip
            min-width="300"
          />
          <el-table-column
            align="center"
            :label="$t('message.spllsdz')"
            prop="historicalVideoAddress"
            show-overflow-tooltip
            min-width="300"
          />
          <el-table-column
            :label="$t('message.caozuo')"
            min-width="200"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-if="functors && functors[0] == '1'"
                  type="text"
                  @click="add(0, scope.row)"
                >{{ $t('message.ssyl') }}</el-button>
                <el-button
                  v-if="functors && functors[1] == '1'"
                  type="text"
                  @click="showZhpzBtnb(scope.row)"
                >{{ $t('message.edit') }}</el-button>
                <el-button
                  v-if="functors && functors[2] == '1'"
                  type="text"
                  @click="removeBtn(scope.row.id)"
                >{{ $t('message.del') }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Paginations
          :total="total"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="$t('message.xzhfsj')" :visible.sync="showTime" width="600px" :close-on-click-modal="modalDialog" :close-on-press-escape="modalDialog">
      <div class="xzsj">
        <el-date-picker
          v-model="param.startTime"
          popper-class="rqtc"
          type="datetime"
          placement="top"
          :placeholder="$t('message.qxz') + $t('message.ksrqsj')"
          :picker-options="pickerBeginOption(1)"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <div class="division-line">-</div>
        <el-date-picker
          v-model="param.endTime"
          popper-class="rqtc"
          type="datetime"
          placement="top"
          :placeholder="$t('message.qxz') + $t('message.jsrqsj')"
          :picker-options="pickerBeginOption(2)"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelTime">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick type="primary" @click="confirmTime">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="playMode == 0 ? $t('message.ssyl') : $t('message.lxhf')"
      :visible.sync="showJk"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="80%"
      custom-class="customClass"
      @close="gbVideo"
      @open="open"
      @opened="openvideo"
    >
      <div style="position: relative" class="fwxInfo" v-html="videohtml" />
    </el-dialog>
    <el-dialog
      :title="form.id ? $t('message.edit') + $t('message.shibei') : $t('message.add') + $t('message.shibei')"
      :visible.sync="showZhpz"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-suffix="：" label-width="auto">
        <el-form-item :label="$t('message.sblx2')" prop="type">
          <el-select
            v-model="form.type"
            :placeholder="$t('message.qxz') + $t('message.sblx2')"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in deviceTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.mc')" prop="name">
          <el-input v-model="form.name" :placeholder="$t('message.qsr') + $t('message.mc')" />
        </el-form-item>
        <el-form-item :label="$t('message.txxy')" prop="httpPort">
          <el-select
            v-model="form.httpPort"
            :placeholder="$t('message.qxz') + $t('message.txxy')"
            clearable
            style="width: 100%"
          >
            <el-option label="http" value="0" />
            <el-option label="https" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.txdz')" prop="ip">
          <el-input v-model="form.ip" :placeholder="$t('message.qsr') + $t('message.txdz')" />
        </el-form-item>
        <el-form-item :label="$t('message.dkh')" prop="portCode">
          <el-input v-model="form.portCode" :placeholder="$t('message.qsr') + $t('message.dkh')" />
        </el-form-item>
        <el-form-item :label="$t('message.dlzh')" prop="account">
          <el-input v-model="form.account" :placeholder="$t('message.qsr') + $t('message.dlzh')" />
        </el-form-item>
        <el-form-item :label="$t('message.dlmm')" prop="password">
          <el-input
            v-model="form.password"
            :placeholder="$t('message.qsr') + $t('message.dlmm')"
            type="password"
          />
        </el-form-item>
        <el-form-item :label="$t('message.tondao')" prop="aisle">
          <el-input v-model="form.aisle" :placeholder="$t('message.qsr') + $t('message.tondao')" />
        </el-form-item>
        <el-form-item :label="$t('message.jindu')" prop="longitude">
          <el-input v-model="form.longitude" :placeholder="$t('message.qsr') + $t('message.jindu')" />
        </el-form-item>
        <el-form-item :label="$t('message.weidu')" prop="latitude">
          <el-input v-model="form.latitude" :placeholder="$t('message.qsr') + $t('message.weidu')" />
        </el-form-item>
        <el-form-item :label="$t('message.sbxlh')" prop="macId">
          <el-input v-model="form.macId" :placeholder="$t('message.qsr') + $t('message.sbxlh')" />
        </el-form-item>
        <el-form-item :label="$t('message.spldz')" prop="realTimeVideoAddress">
          <el-input
            v-model="form.realTimeVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spldz')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.spllsdz')" prop="historicalVideoAddress">
          <el-input
            v-model="form.historicalVideoAddress"
            :placeholder="$t('message.qsr') + $t('message.spllsdz')"
          />
        </el-form-item>
		<el-form-item :label="$t('message.nvrMacId')" prop="nvrMacId">
		  <el-input
		    v-model="form.nvrMacId"
		    :placeholder="$t('message.qsr') + $t('message.nvrMacId')"
		  />
		</el-form-item>
		<el-form-item :label="$t('message.nvrChannelNo')" prop="nvrChannelNo">
		  <el-input
		    v-model="form.nvrChannelNo"
		    :placeholder="$t('message.qsr') + $t('message.nvrChannelNo')"
		  />
		</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showZhpz = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cameraDel,
  getSoftDownLoad,
  monitory,
  manufacturerList,
  manufacturerDetail,
  cameraAdd,
  cameraInfo,
  cameraList,
  openCameraArlming
} from '@/api'
import { parseTime } from '@/utils'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import store from '@/store'
// import MapDrag from '@/components/Map/mapDrag.vue'
export default {
  // components: {
  //   MapDrag
  // },
  name: 'Devicei',
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      info: {},
      tabList: [],
      functors: [],
      multipleSelection: [],
      active: '0',
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      list: [],
      listLoading: true,
      statusList: [
        { value: '1', label: this.$t('message.zaixian') },
        { value: '0', label: this.$t('message.lixian') }
      ],
      deviceTypes: [
        { value: '0', label: this.$t('message.jksxt') },
        { value: '1', label: this.$t('message.qymdsxt') },
        { value: '2', label: this.$t('message.rlzpsxt') }
      ],
      filters: {},
      param: {},
      playWndHeight: '',
      // 视频盒子的宽度
      playWndWidth: '',
      oWebControl: null,
      initCount: 0,
      pubKey: '',
      playMode: 0, // 0 预览 1回放
      cameraIndexCode: '', // 监控点编号
      objData: {},
      showJk: false,
      showTime: false,
      showZhpz: false,
      form: {},
      rules: {
        type: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sblx2'), trigger: 'change' }
        ],
        name: [{ required: true, message: this.$t('message.qsr') + this.$t('message.mc'), trigger: 'blur' }],
        ip: [{ required: true, message: this.$t('message.qsr') + this.$t('message.txdz'), trigger: 'blur' }],
        portCode: [{ required: true, message: this.$t('message.qsr') + this.$t('message.dkh'), trigger: 'blur' }],
        httpPort: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.txxy'), trigger: 'change' }
        ],
        account: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dlzh'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.dlmm'), trigger: 'blur' }
        ],
        aisle: [{ required: true, message: this.$t('message.qsr') + this.$t('message.tondao'), trigger: 'blur' }],
        macId: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sbxlh'), trigger: 'blur' }
        ],
        realTimeVideoAddress: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.spldz'), trigger: 'blur' }
        ],
        historicalVideoAddress: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.spllsdz'), trigger: 'blur' }
        ],
        longitude: [{ required: true, message: this.$t('message.qsr') + this.$t('message.jindu'), trigger: 'blur' }],
        latitude: [{ required: true, message: this.$t('message.qsr') + this.$t('message.weidu'), trigger: 'blur' }],
        location: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.jtdz'), trigger: 'blur' }
        ]
      },
      companyVideoData: {},
      iWidth: '1000',
      iHeight: '500',
      webVideo: {},
      iStreamType: 1,
      iChannelID: '',
      src: 'http://hls.cntv.lxdns.com/asp/hls/main/0303000a/3/default/978a64ddd3a1caa85ae70a23414e6540/main.m3u8',
      videohtml: ''
    }
  },
  // computed: {
  //   latitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[0]
  //       : ''
  //   },
  //   longitude() {
  //     return this.form.location
  //       ? this.form.location.split(',')[1]
  //       : ''
  //   }
  // },
  created() {
    this.tomanufacturerList()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  // destroyed() {
  //   var oWndInfo = WebVideoCtrl.I_GetWindowStatus(0)
  //   if (oWndInfo != null) {
  //     // 已经在播放了，先停止
  //     WebVideoCtrl.I_Stop()
  //   }
  // },
  methods: {
    rowCanSelect(row, index) {
      if (row.type === '1') {
        return true
      }
      return false
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (let i = 0; i < val.length; i++) {
        if (this.multipleSelection.indexOf(val[i].id) === -1) {
          this.multipleSelection.push(val[i].id)
        }
      }
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getCenter(data) {
      this.$set(this.form, 'postion', data.address)
      this.$set(this.form, 'location', data.lnglat)
      this.$refs.ruleForm.clearValidate()
    },
    // 开启布防
    openCameraArlm() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.bfsb'))
        return false
      }
      const multipleSelection = this.multipleSelection
      openCameraArlming({
        param: {
          ids: multipleSelection.join(','),
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.$alert(res.record, this.$t('message.ts'), {
            confirmButtonText: this.$t('message.qd'),
            center: true,
            callback: action => {
            }
          })
        })
        .catch((err) => {
          this.$alert(err.message, this.$t('message.ts'), {
            confirmButtonText: this.$t('message.qd'),
            center: true,
            callback: action => {
            }
          })
          console.log(err)
        })
    },
    removeBtn(id) {
      const that = this
      this.$confirm(this.$t('message.scsxttc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          cameraDel({ param: { id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    showZhpzBtn() {
      this.form = {}
      this.showZhpz = true
    },
    showZhpzBtnb(e) {
      cameraInfo({ param: { id: e.id }}, sessionStorage.getItem('venueId'))
        .then((res) => {
          if (res.errorCode === '000000') {
            const obj = { ...res.record }
            var str = e.location
            obj.longitude = str.split(',')[0]
            obj.latitude = str.split(',')[1]
            obj.httpPort = obj.httpPort.toString()
            obj.realTimeVideoAddress = e.realTimeVideoAddress
            obj.historicalVideoAddress = e.historicalVideoAddress
            obj.macId = e.macId
            this.form = obj
            console.log(141, this.form)
            this.showZhpz = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    onSubmit() {
      const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ...that.form }
          param.venueId = sessionStorage.getItem('venueId')
          param.manuFacturer = that.tabList[this.active].id
          param.manuFacturerName = that.tabList[this.active].manufacturer
          param.userId = sessionStorage.getItem('userId')
          param.location = param.longitude + ',' + param.latitude
          param.httpPort = Number(param.httpPort)
          this.subLoading = true
          cameraAdd({
            param
          })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.tjsbcg'))
                that.showZhpz = false
                that.getList(1)
              }
            })
            .catch((err) => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tbBtn() {
      monitory(
        {
          param: {
            manufacturerId: this.tabList[this.active].id,
            venueId: sessionStorage.getItem('venueId')
          }
        },
        sessionStorage.getItem('venueId')
      )
        .then((res) => {
          if (res.errorCode === '000000') {
            this.getList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    pickerBeginOption(e) {
      const date = new Date()
      const minutes = date.getMinutes()
      // h和m 是将日期只取时分
      const h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = minutes < 10 ? '0' + minutes : minutes
      // pickerDate 判断当前选择时间是否等于上条数据时间
      // 若等于时，限制时间从00：00：00 - 上条数据开始时间，不等于时，24小时可选
      let str = ''
      if (e === 1) {
        str = this.param.startTime
      } else {
        str = this.param.endTime
      }
      const pickerDate = date.toDateString() === new Date(str).toDateString()
      return {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime()
        },
        selectableRange: pickerDate
          ? '00:00:00 -' + h + m + ':00'
          : '00:00:00 - 23:59:59'
      }
    },
    handleClick(e) {
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      cameraList(
        {
          pagination,
          param: {
            venueId,
            ...filters,
            manuFacturer: this.tabList[this.active].id
          }
        },
        sessionStorage.getItem('venueId')
      )
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          this.info = res
          this.multipleSelection = []
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    tomanufacturerList() {
      manufacturerList(
        { param: { type: '3' }},
        sessionStorage.getItem('venueId')
      )
        .then((res) => {
          this.tabList = res.recordList
          this.functors = res.recordList[0].functors || []
          this.getList(1)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    cjxz() {
      getSoftDownLoad(
        { param: { manufacturerId: this.tabList[this.active].id }},
        sessionStorage.getItem('venueId')
      )
        .then((res) => {
          if (res.errorCode === '000000') {
            window.open(res.record, '_blank')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    manufacturerDetail() {
      manufacturerDetail(
        { param: { manufacturerId: this.tabList[this.active].id }},
        sessionStorage.getItem('venueId')
      )
        .then((res) => {
          if (res.errorCode === '000000') {
            const cont =
              res.record.manufacturer + res.record.text.replace(/\n/g, '<br/>')
            this.$alert(cont, this.$t('message.cssm'), {
              dangerouslyUseHTMLString: true
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showTimeBtn(e) {
      this.showTime = true
      cameraInfo({ param: { id: e.id }}, sessionStorage.getItem('venueId'))
        .then((res) => {
          if (res.errorCode === '000000') {
            this.companyVideoData = {
              IP: res.record.ip,
              Port: res.record.httpPort,
              Username: res.record.account,
              Password: res.record.password,
              iChannelID: res.record.aisle
            }
            this.showJk = true
            this.playMode = e
            this.videoInitPlugin()
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.param = {}
    },
    cancelTime() {
      this.showTime = false
    },
    confirmTime() {
      if (!this.param.startTime) {
        this.$message.error(this.$t('message.qxz') + this.$t('message.kssj'))
        return
      }
      if (!this.param.endTime) {
        this.$message.error(this.$t('message.qxz') + this.$t('message.jssj'))
        return
      }
      var startTime = new Date(this.param.startTime).getTime()
      var endTime = new Date(this.param.endTime).getTime()
      if (endTime <= startTime) {
        this.$message.warning(this.$t('message.jssjbnzykssj'))
        return
      }
      this.showTime = false
      this.add(1)
    },
    gbVideo() {
      if (this.player) {
        this.player.dispose() // 该方法会重置videojs的内部状态并移除dom
        this.videohtml = ''
      }
      this.showJk = false
    },
    open() {
      this.videohtml =
        '<video id="currentPlayer" class="video-js vjs-big-play-centered vjs-default-skin" style="width:100%;height:500px"></video>'
    },
    openvideo() {
      const that = this
      setTimeout(() => {
        this.$nextTick(() => {
          var myPlayer = videojs('currentPlayer')
          myPlayer.src([
            {
              type: 'application/x-mpegURL',
              src: that.src
            }
          ])
          myPlayer.play()
          this.player = myPlayer
        })
      }, 300)
    },
    add(e, cont) {
      if (e === 0) {
        this.src = cont.realTimeVideoAddress
        this.showJk = true
        this.playMode = e
      } else {
        this.showJk = true
        this.playMode = e
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hksp {
  width: 100%;
  height: 70vh;
}
.xzsj {
  display: flex;
  align-items: center;
  .division-line {
    margin: 0 20px;
  }
}
// .tips {
//   display: flex;
//   margin-bottom: 20px;
//   .tips_box {
//     flex: 1;
//     display: flex;
//     align-items: center;
//     background-color: rgba(32, 178, 170, 1);
//     &:first-of-type {
//       margin-right: 10px;
//     }
//     &:last-of-type {
//       margin-left: 10px;
//       background-color: rgba(65, 105, 225, 1);
//     }
//     div {
//       font-size: 20px;
//       color: #fff;
//       text-align: center;
//       padding: 20px 0;
//       line-height: 1.5;
//       flex: 1;
//       p {
//         margin: 0;
//         &:last-of-type {
//           margin-top: 20px;
//           font-size: 24px;
//           font-weight: bold;
//         }
//       }
//       &.tips_xian {
//         width: 1px;
//         height: 80px;
//         background-color: #fff;
//         flex: none;
//       }
//     }
//   }
// }
.videobox {
  width: 100%;
  height: 500px;
  // overflow: hidden;
}
</style>
<style>
.rqtc .el-picker-panel__footer .el-button--text {
  display: none !important;
}
</style>
